<template>
  <div>
    <el-descriptions class="margin-top" title="用户信息" :column="3" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            编号
          </div>
        </template>
        <el-tag size="small">{{ workerData.id }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        {{ workerData.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            昵称
          </div>
        </template>
        {{ workerData.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            电话
          </div>
        </template>
        {{ workerData.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Lock />
            </el-icon>
            密码
          </div>
        </template>
        {{ workerData.password }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <More />
            </el-icon>
            状态
          </div>
        </template>
        {{ workerData.state == 0 ? '休息中' : '工作中'}}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed } from "vue";
import axios from 'axios';
export default {
  setup() {
    const store = useStore();
    const workerData = computed(() => store.state.worker.info);
    return {
      workerData
    };
  },
  methods: {
    load(){
      axios.get('http://localhost:9090/worker/get_worker_state',
        {
          params: {
            id: this.workerData.id
          },
          headers: {
            'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
          }
        }
      ).then(res => { 
        this.workerData.state = res.data;
        console.log(this.workerData);
      }).catch(err => {
        console.log(err);
      });
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}
</style>
